<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    输入搜索的文字<input type="text" class="myinput" /> <button>点击我查询</button>
    <div class="exchange">

    </div>
    <script>
        // let btn = document.querySelector("button");
        // let myinput = document.querySelector(".myinput");
        // btn.onclick = function(){
        //     let val = myinput.value;
        //     let s = document.createElement("script");
        //     s.src = `https://suggestion.baidu.com/su?wd=${val}&cb=jsonp_4`;
        //     document.head.appendChild(s);
        // }
        // function jsonp_4(res){
        //     let exchange = document.querySelector(".exchange");
        //     exchange.innerHTML = "";
        //     console.log(res);
        //     let {s} = res;
        //     s.forEach(item=>{
        //         let pEle = document.createElement("p");
        //         pEle.innerHTML = item;
        //         exchange.appendChild(pEle);
        //     })
        // }


        let btn = document.querySelector("button");
        let myinput = document.querySelector(".myinput");
        btn.onclick = function () {
            let val = myinput.value;
            let s = document.createElement("script");
            s.src = `https://toy1.weather.com.cn/search?cityname=${val}&callback=jsonp_4`;
            document.head.appendChild(s);
        }
        // function jsonp_4(res) {
        //     let exchange = document.querySelector(".exchange");
        //     exchange.innerHTML = "";
        //     console.log(res);
        //     let { s } = res;
        //     s.forEach(item => {
        //         let pEle = document.createElement("p");
        //         pEle.innerHTML = item;
        //         exchange.appendChild(pEle);
        //     })
        // }

        function jsonp_4(response) {
            let exchange = document.querySelector(".exchange");
            exchange.innerHTML = ""; // 清空之前的内容
            console.log(response); // 打印响应数据，以便调试

            // 遍历响应数组中的每个对象
            response.forEach(item => {
                // 创建一个段落元素
                let pEle = document.createElement("p");
                // 设置段落的文本内容为当前对象的 "ref" 属性值
                pEle.textContent = item.ref;
                // 将段落添加到页面中
                exchange.appendChild(pEle);
            });
        }



    </script>
</body>

</html>